<!-- 教练 – 我的 – 我的课程		kecheng	 -->
<template>
	<view class="warps">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" bg-color="#fff" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper style="height:100vh;width: 100%;" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item >
				 <scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="kecheng-top" v-for="(item,index) in listsa" :key="index">
						<view class="w95 f b p_t_10">
							<view>
								<image style="width: 248rpx;height: 156rpx;margin-top:10rpx;" :src="item.url" mode=""></image>
							</view>
							<view class="vw65 f d p_t_10">
								<text class="fs28 bold">课程名称课程名称课程名称</text>
								<text class="fs16 hui p_t_10">课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</text>
								<view class="f b p_t_10">
									<view class="">
										<text class="hui fs16">上课时间</text>
									</view>
									<view class="information-buts" @click="show = true">
										<button type="default">正常打卡</button>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="">
						<view class="cover" v-show="show">
								
						</view>
						<view class="Details-huod" v-show="show">
							<view class="senter fs32 hui bold" style="padding-top:200rpx;">
								<text>非会员提醒<br>只能预约1次体验课程</text>
							</view>
						</view>
						<view class="Details-guan" v-show="show"  @click="show = false">
							<image style="width: 64rpx;height: 64rpx;" src="../../../../static/img/020.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item >
				<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="kecheng-top" v-for="(item,index) in listsa" :key="index">
						<view class="w95 f b p_t_10">
							<view>
								<image style="width: 248rpx;height: 156rpx;margin-top:10rpx;" :src="item.url" mode=""></image>
							</view>
							<view class="vw65 f d p_t_10">
								<text class="fs28 bold">课程名称课程名称课程名称</text>
								<text class="fs16 hui p_t_10">课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</text>
								<view class="f b p_t_10">
									<view class="">
										<text class="hui fs16">上课时间</text>
									</view>
									<view class="information-buts" @click="show = true">
										<button type="default">正常打卡</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item >
				<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="kecheng-top" v-for="(item,index) in 3" :key="index">
						<view class="w95 f b p_t_10">
							<view>
								<image style="width: 248rpx;height: 156rpx;margin-top:10rpx;" src="../../../../static/img/073.png" mode=""></image>
							</view>
							<view class="vw65 f d p_t_10">
								<text class="fs28 bold">课程名称课程名称课程名称</text>
								<text class="fs16 hui p_t_10">课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</text>
								<view class="f b p_t_10">
									<view class="">
										<text class="hui fs16">上课时间</text>
									</view>
									<view class="information-buts" @click="show = true">
										<button type="default">正常打卡</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item >
				<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="kecheng-top" v-for="(item,index) in 4" :key="index">
						<view class="w95 f b p_t_10">
							<view>
								<image style="width: 248rpx;height: 156rpx;margin-top:10rpx;" src="../../../../static/img/073.png" mode=""></image>
							</view>
							<view class="vw65 f d p_t_10">
								<text class="fs28 bold">课程名称课程名称课程名称</text>
								<text class="fs16 hui p_t_10">课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍</text>
								<view class="f b p_t_10">
									<view class="">
										<text class="hui fs16">上课时间</text>
									</view>
									<view class="information-buts" @click="show = true">
										<button type="default">正常打卡</button>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				listsa: [{
						url: '../../../../static/img/073.png'
					},
					{
						url: '../../../../static/img/073.png'
					},
					{
						url: '../../../../static/img/073.png'
					},
					{
						url: '../../../../static/img/073.png'
					},
					{
						url: '../../../../static/img/073.png'
					},
					{
						url: '../../../../static/img/073.png'
					},
					{
						url: '../../../../static/img/073.png'
					},
					{
						url: '../../../../static/img/073.png'
					},
					{
						url: '../../../../static/img/073.png'
					}
				],
				list: [{
					name: '全部课程'
				}, {
					name: '正常打卡'
				}, {
					name: '迟到/早退'
				},
				{
					name: '未上班'
				}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '我的课程'
			})
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}
		}
	}
</script>

<style scoped>
	.warps {
		/* height:180vh; */
		overflow: hidden;
		background-color:#F6F8FC;
	}
	.kecheng-top{
		width: 686rpx;
		height: 204rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0,0,0,0.16); 
		margin:0 auto;
	}
	.information-buts>button{
		width: 160rpx;
		height: 36rpx;
		line-height:36rpx;
		opacity: 1;
		background: #f1f6ff;
		border-radius: 18rpx;
		font-size:20rpx;
		color: #1f73f2;
	}
</style>
